﻿function banner(){
var len=$(".picbox>ul>li").size(),
            ull=$(".picbox>ul"),
            //oll=$(".picbox>ol"),
            w=$(".picbox>ul>li:first").width(),
            str="";
        var timer="",index=0;
            str+='<ol id="ols">';
            for(var i=0;i<len;i++){
                str+='<li></li>'
            }
            str+='</ol>';
            $(str).appendTo($("#picbox"));
            $("#ols li").eq(0).addClass("on");
           // console.log($("#ols li").eq(0).outerWidth(true))
            $("#ols").css({
                marginLeft:-($("#ols li").eq(0).outerWidth(true)*len)/2
            })
            ull.width((len+1)*w+"px");

            $(".picbox>ol>li").mouseover(function(){
                index=$(this).index();
                showimg()
            })          

            $(".prev").on("click",prevPic)
            function prevPic(){
                index-=1;
                if(index<=0){
                    index=0;
                }
                    showimg();
            }

        
            $(".next").on("click",nextPic);
            function nextPic(){
                index+=1;
                if (index>=len){
                    showfirst();
                    index=0;
                }else{
                    showimg()
                }
                
            }


            $(".picbox").hover(function(){
                clearInterval(timer)
            },function(){
                timer=setInterval(function(){
                    index+=1;
                    if(index>=len){
                        showfirst()
                        index=0
                    }else{
                        showimg()
                    }
                },4000)
            }).mouseleave();

            function showfirst(){
                $(".next").off("click");
                $(".prev").off("click");
                ull.find("li:first").clone().appendTo(ull);
                ull.stop().animate({
                    left:-len*w
                },600,function(){
                    
                    ull.css('left',0).find('li:last').remove();
                    $(".next").on("click",nextPic);
                    $(".prev").on("click",prevPic);
                })
                $(".picbox>ol>li").eq(0).addClass('on').siblings().removeClass();
            }

            function showimg(){
                $(".next").off("click");
                $(".prev").off("click");
                ull.stop().animate({
                    left:-index*w
                },600,function(){
                    $(".next").on("click",nextPic);
                    $(".prev").on("click",prevPic);
                })
                $(".picbox>ol>li").eq(index).addClass("on").siblings().removeClass();
            }
}




            